<template>
  <div class="house-list-container">
    <h2>房源列表</h2>
    <div v-if="props.loading" class="loading">加载中...</div>
    <div v-if="props.errorMessage" class="error-message">{{ props.errorMessage }}</div>
    <table v-else class="house-table">
      <thead>
        <tr>
          <th>标题</th>
          <th>价格</th>
          <th>面积</th>
          <th>卧室</th>
          <th>浴室</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="house in houses" :key="house.id">
          <td>{{ house.title }}</td>
          <td>{{ house.price }}</td>
          <td>{{ house.area }} m²</td>
          <td>{{ house.bedrooms }}</td>
          <td>{{ house.bathrooms }}</td>
          <td class="actions">
            <button @click="handleEdit(house)" class="edit-btn">编辑</button>
            <button @click="handleDelete(house.id)" class="delete-btn">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { houseService } from '../../../services/houseService';

const props = defineProps({
  houses: {
    type: Array,
    required: true,
    default: () => []
  },
  loading: {
    type: Boolean,
    required: true,
    default: false
  },
  errorMessage: {
    type: String,
    required: true,
    default: ''
  }
});

const emit = defineEmits(['edit-house', 'delete-house']);

const handleEdit = (house) => {
  emit('edit-house', house);
};

const handleDelete = (id) => {
  if (confirm('确定要删除这个房源吗？')) {
    emit('delete-house', id);
  }
};


</script>

<style scoped>
.house-list-container {
  margin: 20px 0;
}

.loading {
  color: #666;
  text-align: center;
  padding: 20px;
}

.error-message {
  color: #dc3545;
  background-color: #f8d7da;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.house-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.house-table th,
.house-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.house-table th {
  background-color: #f8f9fa;
  font-weight: bold;
}

.actions {
  display: flex;
  gap: 8px;
}

.edit-btn,
.delete-btn {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.edit-btn {
  background-color: #007bff;
  color: white;
}

.delete-btn {
  background-color: #dc3545;
  color: white;
}
</style>